<template>
	<view>
		<view class="block">
			<view class="item">
				<view class="item_l">
					是否含税
				</view>
				<view class="item_r1" @click="openpop">
					<span style="color: black;">{{params.includeTax}}</span>
					<uni-icons type="right" color="#3658FF"></uni-icons>
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					合同金额
				</view>
				<view class="item_r">
					<input v-model="params.contractAmount" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					签订日期
				</view>
				<view class="item_r1">
					<uni-datetime-picker type="date" v-model="params.signDate" @change="changeLog">
						<view class="" style="display: flex;align-items: center;">
							<span style="color: black;">{{params.signDate?params.signDate:'请选择'}}</span>
							<image class="logo" src="/static/t1.png"></image>
						</view>
					</uni-datetime-picker>
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					签订地点
				</view>
				<view class="item_r">
					<input maxlength="25" v-model="params.signAddress" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					开户行
				</view>
				<view class="item_r">
					<input v-model="params.bankName" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					账号
				</view>
				<view class="item_r">
					<input v-model="params.bankAccount" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					税号
				</view>
				<view class="item_r">
					<input v-model="params.taxNumber" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item" style="border: none;">
				<view class="item_l">
					合同备注
				</view>
			</view>
			<view class="textarea">
				<textarea 
				maxlength="55" v-model="params.remark2" auto-height placeholder="请输入" placeholder-class="inputs"></textarea>
			</view>
		</view>
		<view class="footerbtn" @click="handleSave">
			<view class="cont">
				<view class="btn">
					{{btntext}}
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="popup_jh">
				<view class="title">
					是否含税
				</view>
				<uni-icons @click="closepop" class="icon" color="#D1D1D6" type="closeempty" size="27"></uni-icons>
				<scroll-view scroll-y="true" class="scroll">
					<view class="its" :class="item.value==params.includeTax?'itsact':''"
						v-for="(item,index) in radiolist" :key="index" @click="changepop(item)">
						{{item.value}}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		contractAdd,
		orderInfo,
		contractInfo,
		contractEdit,
		customer
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				params: {
					orderId: '',
					bankName: '',
					bankAccount: '',
					taxNumber: '',
					includeTax: '是',
					contractAmount: '',
					signDate: '',
					signAddress: '',
					remark2: ''
				},
				radiolist: [{
						value: '是'
					},
					{
						value: '否'
					}
				],
				isvalue: '是',
				info: {},
				istype: 0,
				btntext: '确认创建'
			};
		},
		onLoad(option) {
			this.istype = option.istype
			if (option.istype == 0) {
				customer({id: option.id}).then(res=>{
					console.log(res);
					this.params.bankName = res.data.bankName
					this.params.bankAccount = res.data.bankAccount
					this.params.taxNumber = res.data.taxNumber
				})
				this.btntext = '确认创建'
				orderInfo({
					id: option.id
				}).then(res => {
					this.info = res.data
					this.params.contractAmount = res.data.amountInclusive
				
					this.params.orderId = option.id
				})
				let month = new Date().getMonth() + 1
				const newmonth = month > 10 ? month : "0" + month;
				this.params.signDate = `${new Date().getFullYear()}-${newmonth}-${new Date().getDate()}`
			} else {
				uni.setNavigationBarTitle({
					title: '修改合同'
				})
				this.btntext = '保存'
				contractInfo({
					id: option.id
				}).then(res => {
					this.params.id = option.id
					this.params.orderId = res.data.orderId
					this.params.bankName = res.data.bankName
					this.params.bankAccount = res.data.bankAccount
					this.params.taxNumber = res.data.taxNumber
					this.params.includeTax = res.data.includeTax
					this.params.contractAmount = res.data.contractAmount
					this.params.signDate = res.data.signDate
					this.params.signAddress = res.data.signAddress
					this.params.remark2 = res.data.remark2
				})
			}
		},
		methods: {
			changeLog(e) {
				console.log(e);
			},
			changepop(item) {
				console.log(item.value);
				this.params.includeTax = item.value
				if (item.value == '是') {
					this.params.contractAmount = this.info.amountInclusive
				} else {
					this.params.contractAmount = this.info.amountExclusive
				}
				this.$refs.popup.close()
			},
			closepop() {
				this.$refs.popup.close()
			},
			openpop() {
				this.$refs.popup.open()
			},
			handleSave() {
				if (this.params.contractAmount == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入金额'
					})
					return
				}
				if (this.istype == 0) {
					contractAdd(this.params).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '已创建合同'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}, 500)
						}
					})
				} else {
					contractEdit(this.params).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '合同已修改'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.block {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 1rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		.textarea {
				width: 650rpx;
				min-height: 160rpx;
				background: #F7F8FA;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				textarea {
					padding: 22rpx 30rpx;
					font-size: 28rpx;
				}
			}
		.item {
			margin-top: 40rpx;
			padding-bottom: 24rpx;
			border-bottom: 1px solid #DADADA;
			display: flex;
			align-items: center;
			justify-content: space-between;

	

			.item_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;

				span {
					color: #FD2B1C;
					font-size: 24rpx;
				}
			}

			.item_r1 {
				margin-left: 20rpx;
				position: relative;
				text-align: right;
				font-size: 28rpx;
				color: #9D9D9D;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.item_r {
				flex: 1;
				margin-left: 20rpx;
				position: relative;
				text-align: right;
				font-size: 28rpx;

				input {
					font-size: 28rpx;
					text-align: right;
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.dingbox {
					position: absolute;
					right: 0rpx;
					width: 280rpx;
					height: 300rpx;
					top: 70rpx;
					background-color: #FFFFFF;
					border: 1px solid #DADADA;
					z-index: 666;
					border-radius: 0rpx 0rpx 20rpx 20rpx;

					.dingtxt {
						font-size: 28rpx;
						color: #000;
						text-align: center;
						line-height: 70rpx;
						border-bottom: 1px dashed #DADADA;
						padding: 0rpx 10rpx;
						box-sizing: border-box;
						white-space: nowrap;
						overflow: hidden;
						// text-overflow:ellipsis;
					}

					.dingtxt:last-child {
						border: none;
					}
				}
			}
		}

		.item:last-child {
			padding-bottom: 0rpx;
			border: none;
		}
	}

	.popup_jh {
		width: 750rpx;
		height: 620rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 48rpx 54rpx;
		box-sizing: border-box;
		position: relative;

		.icon {
			right: 54rpx;
			top: 48rpx;
			position: absolute;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
			text-align: center;
		}

		.scroll {
			margin-top: 50rpx;
			height: 400rpx;

			.its {
				width: 600rpx;
				height: 100rpx;
				background: #F7F8FA;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: 20rpx auto;
				text-align: center;
				line-height: 100rpx;
				color: #333333;
			}

			.itsact {
				background: #3658FF;
				color: #FFFFFF;
			}
		}
	}

	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 2;

		.cont {
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			justify-content: center;

			.btn {
				width: 400rpx;
				height: 80rpx;
				background: #3658FF;
				border-radius: 40rpx;
				color: #FFFFFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 80rpx;
				text-align: center;
			}

			.absbtn {
				background: #808080;
			}
		}
	}
</style>